<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>树网格之上下文菜单 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2 title="TreeGrid ContextMenu">树网格之上下文菜单</h2>
	<p title="Right click to display the context menu.">　　在网格行节点上单击鼠标右键（<i>移动设备中长按2秒即可，最好避开文字</i>）即可显示上下文菜单。</p>
	<div style="margin:10px 0;"></div>
	<table id="tg" class="easyui-treegrid" title="<ch title='TreeGrid ContextMenu'>&nbsp;上下文菜单</ch>" style="width:700px;height:250px"
			data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				url: 'treegrid_data2.json',
				method: 'get',
				idField: 'id',
				treeField: 'name',
				onContextMenu: onContextMenu
			">
		<thead>
			<tr>
				<th data-options="field:'name',width:180,halign:'center'"><h title="Task Name">工程项目</h></th>
				<th data-options="field:'persons',width:60,align:'right',halign:'center'"><h title="Persons">投入人力</h></th>
				<th data-options="field:'begin',width:80,align:'center'"><h title="Begin Date">开工日期</h></th>
				<th data-options="field:'end',width:80,align:'center'"><h title="End Date">竣工日期</h></th>
				<th data-options="field:'progress',width:120,formatter:formatProgress,halign:'center'"><h title="Progress">当前施工进度</h></th>
			</tr>
		</thead>
	</table>
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="append()" data-options="iconCls:'icon-add'">追加子项</div>
		<div onclick="removeIt()" data-options="iconCls:'icon-remove'">移除</div>
		<div class="menu-sep"></div>
		<div onclick="collapse()">收缩</div>
		<div onclick="expand()">展开</div>
	</div>
	<script type="text/javascript">
		function formatProgress(value){
	    	if (value){
		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
		    			'<div style="text-align:right; width:' + value + '%;background:#cc0000;color:#fff">' + value + '％' + '</div>'
		    			'</div>';
		    	return s;
	    	} else {
		    	return '';
	    	}
		}
		function onContextMenu(e,row){
			if (row){
				e.preventDefault();
				$(this).treegrid('select', row.id);
				$('#mm').menu('show',{
					left: e.pageX,
					top: e.pageY
				});				
			}
		}
		var idIndex = 100;
		function append(){
			idIndex++;
			var d1 = new Date();
			var d2 = new Date();
			d2.setMonth(d2.getMonth()+1);
			var node = $('#tg').treegrid('getSelected');
			$('#tg').treegrid('append',{
				parent: node.id,
				data: [{
					id: idIndex,
					name: '新子任务 '+idIndex,
					persons: parseInt(Math.random()*10),
					begin: $.fn.datebox.defaults.formatter(d1),
					end: $.fn.datebox.defaults.formatter(d2),
					progress: parseInt(Math.random()*100)
				}]
			})
		}
		function removeIt(){
			var node = $('#tg').treegrid('getSelected');
			if (node){
				$('#tg').treegrid('remove', node.id);
			}
		}
		function collapse(){
			var node = $('#tg').treegrid('getSelected');
			if (node){
				$('#tg').treegrid('collapse', node.id);
			}
		}
		function expand(){
			var node = $('#tg').treegrid('getSelected');
			if (node){
				$('#tg').treegrid('expand', node.id);
			}
		}
	</script>
</body>
</html>